<template>
  <div class="dialogs-container">
    <el-dialog
      center
      title="盘点订单"
      :visible.sync="dialogVisible"
      width="70%"
      top="4%"
      :close-on-click-modal="false"
    >
      <!-- 第一行，信息 -->
      <el-card shadow="always">
        <el-form
          :inline="true"
          class="demo-form-inline"
          label-width="100px"
          size="small"
        >
          <el-form-item label="订单编号" style="margin-bottom: 5px">
            <el-input v-model="id" disabled style="width: 150px" />
          </el-form-item>
          <el-form-item label="订单日期" style="margin-bottom: 5px">
            <el-date-picker
              v-model="date"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="选择日期"
              :disabled="!flag"
              style="width: 150px"
            />
          </el-form-item>
          <el-form-item label="盘点位置" style="margin-bottom: 5px">
            <el-cascader
              v-model="outList"
              :props="{ checkStrictly: true }"
              placeholder="请选择"
              :options="options"
              filterable
              style="width: 150px"
              :disabled="!flag"
              @change="getChecks"
            />
          </el-form-item>
        </el-form>
      </el-card>
      <!-- 第二行，表格详情 -->
      <el-card shadow="always" style="margin-top: 5px">
        <el-table
          style="width: 100%"
          :data="checks"
          size="small"
          height="200px"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            width="55"
            align="center"
            :selectable="check"
          />
          <!-- 货物id -->
          <el-table-column label="编号" width="130" align="center" prop="id" />
          <!-- 货物名称 -->
          <el-table-column
            label="货物名称"
            width="140"
            align="center"
            prop="goodsName"
          />
          <!-- 品牌 -->
          <el-table-column
            prop="brandName"
            label="品牌"
            width="130"
            align="center"
          />
          <!-- 单位 -->
          <el-table-column label="单位" width="50" align="center" prop="unit" />
          <!-- 位置 -->
          <el-table-column
            prop="warehouse"
            label="仓库"
            width="100"
            align="center"
          />
          <el-table-column prop="area" label="分区" width="50" align="center" />
          <el-table-column
            prop="position"
            label="库位"
            width="50"
            align="center"
          />

          <!-- 状态 -->
          <el-table-column v-if="!flag" label="状态" align="center">
            <template slot-scope="{ row }">
              <el-tag
                effect="dark"
                :type="row.flag === 0 ? 'warning' : 'success'"
              >{{ row.flag === 0 ? "待盘点" : "已盘点" }}</el-tag>
            </template></el-table-column>
          <!-- 货物状态 -->
          <el-table-column v-else label="货物状态" align="center">
            <template slot-scope="{ row }">
              <el-tag
                :type="
                  row.status === 1
                    ? 'success'
                    : row.status === 2
                      ? 'warning'
                      : 'danger'
                "
              >{{
                row.status === 1 ? "入库" : row.status === 2 ? "废弃" : "丢失"
              }}</el-tag>
            </template></el-table-column>
        </el-table>
      </el-card>
      <!-- 第三行，页脚插槽 -->
      <span slot="footer" class="dialog-footer">
        <el-button
          v-show="multipleSelection.length !== 0"
          size="small"
          type="primary"
          @click="dialogTableVisible = true"
        >批量盘点</el-button>
        <el-button size="small" @click="dialogVisible = false">取消</el-button>
      </span>
    </el-dialog>
    <!-- 批量盘点类型的弹窗 -->
    <el-dialog
      top="200px"
      width="30%"
      title="批量盘点"
      :visible.sync="dialogTableVisible"
    >
      <el-radio-group v-model="status">
        <el-radio label="1">入库</el-radio>
        <el-radio label="2">废弃</el-radio>
        <el-radio label="3">丢失</el-radio>
      </el-radio-group>
      <!-- 页脚插槽 -->
      <span slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" @click="modify">确定</el-button>
        <el-button
          size="small"
          @click="dialogTableVisible = false"
        >取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'Dialogs',
  data() {
    return {
      // 弹窗显示与隐藏
      dialogVisible: false,
      // 查看|添加模式标记
      flag: '',
      // 订单编号
      id: '',
      // 订单日期
      date: new Date(),
      // 订单信息
      checks: [],
      // 品牌-货物列表
      goods: [],
      // 仓库信息
      options: [],
      // 调出
      outList: [],
      // 选中的货物
      multipleSelection: [],
      // 批量盘点类型弹窗标记
      dialogTableVisible: false,
      // 批量盘点类型
      status: '1'
    }
  },
  mounted() {
    this.getSupplier()
    this.getWarehouse()
  },
  methods: {
    // 切换选中状态
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 弹框确认
    open() {
      this.$confirm('是否确认将选中的货物盘点?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.update()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '盘点失败！'
        })
      })
    },
    // 检查改行是否可以被选中
    check(row, index) {
      return row.flag === 0
    },
    // 修改货物数量
    changeCount(row) {
      // console.log(row)
    },
    // 添加盘点记录
    addItem() {
      // 构造盘点记录对象
      const obj = {
        goodsId: '',
        inPrice: 0,
        num: 1,
        supplierId: '',
        unit: ''
      }
      // 将盘点记录添加到列表中
      this.checks.push(obj)
      // 获取仓库货物信息
      this.getGoods()
    },
    // 删除盘点记录
    deleteItem($index) {
      // splice可以删除数组中的元素，返回的是被删除的元素，且会改变原数组的值
      this.checks.splice($index, 1)
    },
    // 获取当前盘点位置下的货物信息
    async getChecks() {
      const response = await this.$API.check.getChecks(this.outList.length >= 1 ? this.outList[0] : 0, this.outList.length >= 2 ? this.outList[1] : 0, this.outList.length >= 3 ? this.outList[2] : 0)
      if (response.code === 200) {
        this.checks = response.data
      } else {
        this.$message.error(response.msg)
      }
    },
    // 获取供应商列表
    async getSupplier() {
      const resposne = await this.$API.supplier.get()
      if (resposne.code === 200) {
        this.suppliers = resposne.data
      } else {
        this.$message.error('获取供应商列表失败！')
      }
    },
    // 获取货物单位
    async getUnit(row, $index) {
      const response = await this.$API.transfer.getUnit(row.goodsId, this.outList[2])
      if (response.code === 200) {
        // 修复动态修改表格数据后，数据不改变的bug
        // this.checks[$index].unit = response.data
        // 本来unit应该通过response.data.unit获取，但后端unit是Unit类型的，这里凑用String类型的name
        this.$set(row, 'unit', response.data.unit)
        this.$set(row, 'brandName', response.data.brandName)
        this.$set(row, 'sum', response.data.sum)
      } else {
        this.$message.error(response.msg)
      }
    },
    // 保存盘点订单
    async add() {
      const response = await this.$API.transfer.add(this.id, this.date, this.outList[0], this.outList[1], this.outList[2], this.inList[0], this.inList[1], this.inList[2], this.checks)
      if (response.code === 200) {
        // 提醒盘点订单创建成功
        this.$message.success(response.msg)
        // 通知父组件，重新拉取盘点订单数据
        this.$emit('get')
        // 关闭弹窗
        this.dialogVisible = false
      } else {
        this.$message.error(response.msg)
      }
    },
    // 获取仓库信息
    async getWarehouse() {
      const response = await this.$API.transfer.warehouse()
      if (response.code === 200) {
        this.options = response.data
      } else {
        this.$message.error(response.msg)
      }
    },
    // 批量调拨
    async modify() {
      const obj = {
        'checks': this.multipleSelection
      }
      const response = await this.$API.check.modify(this.status, obj)
      if (response.code === 200) {
        this.options = response.data
        // 关闭弹窗
        this.dialogTableVisible = false
        this.dialogVisible = false
        // 重新拉取数据
        this.$emit('get')
      } else {
        this.$message.error(response.msg)
      }
    }
  }
}
</script>

<style>
.el-form-item {
  margin-bottom: 22px;
}
</style>
